import React, { useEffect, useState } from 'react'
import NavBar from '../../../components/Navbar'
import { InfiniteScroll, Toast } from 'antd-mobile'
import './index.less'
import { unionRecordList } from '../../../api/union'
import { useSearchParams } from 'react-router-dom'
const tabData = [
  { title: '日结算', id: 1 },
  { title: '周结算', id: 2 }
]
let page = 1
function IncomeDetail() {
  const params = useSearchParams()[0]
  const [type, setType] = useState(1)

  const [hasMore, setHasMore] = useState(false)
  const [data, setData] = useState([])

  useEffect(() => {
    // console.log(params);
    setData([])
    page = 1
    setHasMore(false)
    getList()
  }, [type])

  const getList = () => {
    Toast.show({
      content: '加载中',
      icon: 'loading',
      maskClickable: false
    })
    //
    unionRecordList({
      page,
      type,
      unionId: params.get('id')
    })
      .then((res) => {
        if (res.data && res.data?.length) {
          setData(page === 1 ? res.data : data.concat(res.data))
        }
        if (res.data && res.data?.length >= 10) {
          page = page + 1
          setHasMore(true)
        } else {
          setHasMore(false)
        }
        Toast.clear()
      })
      .catch((err) => {
        setHasMore(false)
        Toast.show({
          position: 'bottom',
          content: err.message
          // icon: ''
        })
      })
  }

  return (
    <div className="union_detail_wrap">
      <NavBar title="公会收益结算" />
      <div className="union tab_bar">
        {tabData.map((item) => (
          <div key={item.id} className={`tab ${item.id === type ? 'active' : ''}`} onClick={() => setType(item.id)}>
            {item.title}
          </div>
        ))}
      </div>
      <div className="list_content">
        <div className="list">
          {data.map((item) => (
            <div className="item">
              <div className="time">{type === 1 ? item.log_time : `${item?.startDate || ''}-${item?.endDate || ''}`}</div>
              <div className="money">{item.reward}</div>
            </div>
          ))}
        </div>
        {data.length >= 8 ? <InfiniteScroll loadMore={getList} hasMore={hasMore} threshold={100}></InfiniteScroll> : null}
      </div>
    </div>
  )
}

export default IncomeDetail
